<script lang="ts" setup>
import { Popup } from "vant";
import { ref, reactive } from "vue";
import InputVant from "@/components/HYInut/input.vue";
import enableImg from "@/image/new_img/home/btnv2_save_enable.png";
import disableImg from "@/image/new_img/home/btnv2_save_disable.png";
import QuxiaoyulanBai from "@/image/new_img/quxiaoyulan_bai.png";
import LoginPwd from "@/image/new_img/login_pwd.svg";
import avatar from "@/image/new_img/logo1080FgzU_320.png";
import AccountList from "@/components/PopupFramePage/accountList.vue";
import ExitApp from "@/components/PopupFramePage/exitApp.vue";
import UploadImage from "@/components/UploadImage/index.vue";
import { useI18n } from "vue-i18n";
import { UserStore } from "@/store";
import { UserAxios } from "@/api/user";
import PubSub from "pubsub-js";
import { PubSubEnum } from "@/types/pubsub";
import CryptoJS from "crypto-js";
const userStore = UserStore();
const props = defineProps<{
  title: string;
  popupType: number;
}>();
//输入框的背景类型
const monitorType = ref(0);
const { t } = useI18n();
const popupShow = ref(false);
const logonType = ref(0);
const clickPopup = () => {
  popupShow.value = true;
};
const userName = ref("");
const oldPassword = ref("");
const newPasswordOne = ref("");
const newPassword = ref("");
//获取用户名
const monitorInput = res => {
  monitorType.value = res.length >= 50 ? 1 : 0;
  userName.value = res.length >= 50 || res.length < 1 ? "" : res;
  logonType.value = res.length >= 50 || res.length < 1 ? 0 : 1;
};

defineExpose({ clickPopup });
// 保存密码
const savefunction = () => {
  if (props.popupType === 1 && !userName.value) {
    return;
  }
  if (props.popupType === 3 && !(oldPassword.value && newPassword.value && newPasswordOne.value)) {
    if (newPassword.value !== newPasswordOne.value) {
      return;
    }
  } else if (
    props.popupType === 3 &&
    oldPassword.value &&
    newPassword.value &&
    newPasswordOne.value &&
    newPassword.value !== newPasswordOne.value
  ) {
    return;
  }

  const params = {
    name: userName.value,
  };
  const paramsPassword = {
    newPassword: CryptoJS.MD5(newPassword.value).toString(),
    oldPassword: CryptoJS.MD5(oldPassword.value).toString(),
  };
  UserAxios.updateUserInfo(props.popupType === 1 ? params : paramsPassword).then((res: any) => {
    if (res.code === 0) {
      PubSub.publish(PubSubEnum.UPDATE_USERINFO);
      popupShow.value = false;
    }
  });
};
/***************修改密码****************************** */
//第一次密码的验证状态
const passwordCheckType = ref(0);
const definePasswordType = ref(0);
const passWordCheck = new RegExp(/^[0-9A-Za-z]{8,20}$/);
//第一次的密码
const setPassword = ref();
const updata = reactive({ passwd: "" });
//密码校验旧密码
const monitorInputPassword = res => {
  oldPassword.value = res;
  if (passWordCheck.test(res) || res.length === 0) {
    passwordCheckType.value = 0;
    // if (passWordCheck.test(res)) {
    //   setPassword.value = res;
    // }
  } else {
    passwordCheckType.value = 1;
  }
};
// 第一次新密码
const newOneInputPassword = res => {
  newPasswordOne.value = res;
  if (passWordCheck.test(res) || res.length === 0) {
    passwordCheckType.value = 0;
    if (passWordCheck.test(res)) {
      setPassword.value = res;
    }
  } else {
    passwordCheckType.value = 2;
  }
  if (updata.passwd.length !== 0) {
    if (newPasswordOne.value === updata.passwd) {
      definePasswordType.value = 0;
    } else {
      definePasswordType.value = 2;
    }
  }
};
//确定密码
const monitorPassword = res => {
  newPassword.value = res;
  if (res === setPassword.value && res.length !== 0) {
    definePasswordType.value = 0;
    updata.passwd = res;
  } else {
    updata.passwd = "";
    if (
      (res.length === setPassword.value.length && res !== setPassword.value) ||
      res.length > setPassword.value.length
    ) {
      definePasswordType.value = 2;
    } else {
      definePasswordType.value = 1;
    }
  }
};
/*********关闭页面*******/
const oncloseFunction = () => {
  popupShow.value = false;
};
/************修改头像的****************/
const checkImage = ref(avatar); //获取头像
const uploadImageRef = ref(); //获取调用的
const handleFileChosen = img => {
  checkImage.value = img;
};
const upImg = () => {
  uploadImageRef.value.uploadFile();
};
</script>
<template>
  <!-- 用户设置 -->
  <Popup
    v-model:show="popupShow"
    :position="'bottom'"
    z-index="100"
    duration="0.5"
    style="height: 100%; background-color: rgba(0, 0, 0, 0.63)"
    :overlay="false"
    :safe-area-inset-top="true"
    :safe-area-inset-bottom="true"
  >
    <div class="content-frame">
      <div class="title-frame df jc-center ai-center">
        <div class="title-name df ai-center">{{ t(props.title) }}</div>
        <img class="close-img" src="@/image/new_img/home/cs_close.png" @click="popupShow = false" />
      </div>
      <div class="set-content-frame">
        <!-- 修改头像 -->
        <div v-if="props.popupType == 0" class="list-frame">
          <img
            class="avatar-img"
            :src="
              userStore.userInfoDetails.profile.avatar !== ''
                ? userStore.userInfoDetails.profile.avatar
                : avatar
            "
            @click="upImg"
          />
          <div class="upimg-frame">
            <img class="photo-enable" src="@/image/new_img/home/btnv2_photo_enable.png" />
            <UploadImage class="uploadImage" ref="uploadImageRef" @file-chosen="handleFileChosen" />
          </div>
        </div>
        <!-- 修改用户名 -->
        <div v-if="props.popupType == 1" class="list-frame set-list-frame">
          <InputVant
            ref="getUserNameRef"
            v-model="userName"
            :maxlength="50"
            :placeholder="t('inputPlaceholder.pleaseEnterANickname')"
            :monitor-type="monitorType"
            @monitor-input="monitorInput"
          >
            <template #errorMessage>
              <div v-show="monitorType == 1" class="signup-item-error">
                {{ t("inputError.contentExceedsQuantity") }}
              </div>
            </template>
          </InputVant>
          <img
            class="bottom-frame"
            :src="userName.length >= 50 || userName.length < 1 ? disableImg : enableImg"
            @click="savefunction"
          />
        </div>
        <!-- 修改密码 -->
        <div v-if="props.popupType == 3" class="list-frame">
          <!-- 旧密码 -->
          <InputVant
            ref="getPassword"
            v-model="oldPassword"
            class="input-segment-frame"
            :monitor-type="passwordCheckType"
            :letf-icon="LoginPwd"
            :rigth-icon="QuxiaoyulanBai"
            :input-type="'password'"
            :placeholder="t('inputPlaceholder.enterOldPassWord')"
            @monitor-input="monitorInputPassword"
          >
            <template #errorMessage>
              <div v-show="passwordCheckType == 1" class="signup-item-error">
                {{ t("inputPlaceholder.passwordRule") }}
              </div>
            </template>
          </InputVant>
          <!-- 第一次新密码 -->
          <InputVant
            ref="getPassword"
            v-model="newPasswordOne"
            class="input-segment-frame"
            :monitor-type="passwordCheckType"
            :letf-icon="LoginPwd"
            :rigth-icon="QuxiaoyulanBai"
            :input-type="'password'"
            :placeholder="t('inputPlaceholder.enternewPassWord')"
            @monitor-input="newOneInputPassword"
          >
            <template #errorMessage>
              <div v-show="passwordCheckType == 2" class="signup-item-error">
                {{ t("inputPlaceholder.passwordRule") }}
              </div>
            </template>
          </InputVant>
          <!-- 第二次新密码 -->
          <InputVant
            ref="getPassword2"
            v-model="newPassword"
            class="input-segment-frame"
            :monitor-type="definePasswordType"
            :input-type="'password'"
            :letf-icon="LoginPwd"
            :rigth-icon="QuxiaoyulanBai"
            :placeholder="t('inputPlaceholder.enterNewAgainPassWord')"
            @monitor-input="monitorPassword"
          >
            <template #errorMessage>
              <div v-show="definePasswordType !== 0" class="signup-item-error">
                <div v-show="definePasswordType === 1">
                  {{ t("inputPlaceholder.passwordRule") }}
                </div>
                <div v-show="definePasswordType === 2">
                  {{ t("inputPlaceholder.passwordSync") }}
                </div>
              </div>
            </template>
          </InputVant>
          <img
            class="bottom-frame"
            :src="oldPassword && newPassword && newPasswordOne ? enableImg : disableImg"
            @click="savefunction"
          />
        </div>
        <!-- 账户 -->
        <div v-if="props.popupType == 4" class="list-frame">
          <AccountList />
        </div>
        <!-- 退出 -->
        <div v-if="props.popupType == 5" class="list-frame">
          <ExitApp @onclose="oncloseFunction" />
        </div>
      </div>
    </div>
  </Popup>
</template>
<style lang="less" scoped>
.page-frame {
  width: 100%;
  height: 100%;
}

.content-frame {
  width: 100%;
  height: 100%;
  /*半透明背景色 */
  backdrop-filter: blur(20px);
  /*背景模糊效果 */
  -webkit-backdrop-filter: blur(20px);
}

.title-frame {
  width: 100%;
  height: 112px;
  background: rgba(255, 255, 255, 0.04);
  position: relative;
  left: 0;
  right: 0;
}

.title-name {
  font-size: 42px;
  color: #ffffff;
}

.close-img {
  width: 45px;
  height: 45px;
  margin-left: 100px;
  position: absolute;
  right: 30px;
  top: 30px;
}

.set-content-frame {
  width: calc(100% - 68px);
  margin-left: 34px;
  margin-top: 38px;
}

.bottom-frame {
  width: 214px;
  height: 85px;
  margin: auto;
  margin-top: 60px;
}

.list-frame {
  width: 100%;
  height: auto;
  text-align: center;
}

.input-segment-frame {
  margin-top: 18.0781px;
}

.signup-item-error {
  font-size: 28px;
  color: #eb5757;
  margin-top: 10px;
  text-align: left;
  padding-left: 20px;
  margin-bottom: 40px;
}
/deep/ .set-list-frame {
  .field-content {
    width: 100%;
  }
}
.avatar-img {
  width: 600px;
  height: 600px;
  margin: auto;
  margin-top: 52px;
  border-radius: 50px;
}
.upimg-frame {
  height: 112.5px;
  width: auto;
  position: relative;
  left: 0;
  top: 0;
  margin: auto;
  margin-top: 90px;
  .photo-enable {
    height: 112.5px;
    width: auto;
  }
  .uploadImage {
    width: 340px;
    height: 112.5px;
    opacity: 0;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    z-index: 10;
    margin: auto;
    overflow: hidden;
  }
}
</style>
